<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的申请</title>
    <link rel="stylesheet" href='/plug-in/pear/css/pear.css' media="all">
    <link rel="stylesheet" href='/css/base.css'>
    <style>
        .layui-timeline-item:before {
            content: "";
            position: absolute;
            left: 3px;
            top: 0;
            z-index: 0;
            width: 4px;
            height: 100%;
            background-color: #e5e5e5
        }
        .layui-timeline-axis{
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="page-content">
    <table class = "layui-hide" id = "table" lay-filter = "table"></table>
</div>

<div class="line-box" style="display: none;padding: 20px;padding-right: 50px"></div>

<script type="text/html" id="lineTemp">
    <ul class="layui-timeline">
        {{#  layui.each(d, (index, data)=>{ }}
        <li class="layui-timeline-item">
            {{#  if(data.state == 1){ }}
            <i class="layui-icon layui-timeline-axis layui-anim layui-anim-rotate layui-anim-loop"></i>
            {{#  }else{ }}
                {{#  if(data.state == 3 || data.remark == 'no'){ }}
                <i class="layui-icon layui-timeline-axis" style="color: #f44336"></i>
                {{#  } else{ }}
                <i class="layui-icon layui-timeline-axis" style="color: #5fb878"></i>
                {{#  } }}
            {{#  } }}
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">
                    {{#  if(data.state !== 4){ }}
                    {{data.assignee}}
                    {{#  } else{ }}
                    流程结束
                    {{#  } }}
                </h3>
                <p>
                    {{#  if(data.processingTime){ }}
                        {{data.processingTime}}<br>
                    {{#  } }}
                    {{#  if(data.state==4){ }}
                        结果
                    {{#  } }}
                    {{#  if(data.remark=="ok"){ }}
                        <span class="layui-badge layui-bg-green">通过</span>
                    {{#  } else if(data.remark=="no"){ }}
                        <span class="layui-badge">不通过</span>
                    {{#  }else{ }}
                        {{data.remark}}
                    {{#  } }}

                    {{#  if(data.state == 1){ }}
                    <span class="layui-badge layui-bg-black">待执行</span>
                    {{#  } else if(data.state == 2){ }}
                    <span class="layui-badge layui-bg-green">同意</span>
                    {{#  } else if(data.state == 3){ }}
                    <span class="layui-badge">拒绝</span>
                    {{#  } }}
                </p>
            </div>
        </li>
        {{#  }) }}
    </ul>
</script>

<script type = "text/html" id = "toolbarTop">
    <div class = "layui-btn-container">
        <button class = "layui-btn layui-btn-sm layui-bg-black" lay-event = "refresh">
            <span class = "fa fa-refresh" title = "刷新表格" aria-hidden = "true"></span>
        </button>
    </div>
</script>
<script type = "text/html" id = "barRight">
    <!--<a class = "layui-btn layui-btn-xs layui-btn-warm" lay-event = "schedule">流程图</a>-->
    <a class = "layui-btn layui-btn-xs" lay-event = "info">详情</a>
    <a class = "layui-btn layui-btn-xs layui-btn-danger" lay-event = "del">删除</a>
</script>
<script src="/plug-in/jquery/jquery-3.5.1.min.js" charset="utf-8"></script>
<script src='/plug-in/layui/layui.js' charset="utf-8"></script>
<script type="text/javascript" >
    let form = layui.form, layer=layui.layer, table = layui.table;

    let tab = table.render({
        elem: '#table',
        url: '/activities/my/historic',
        //page: {
        //    layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
        //    groups: 3, //只显示 1 个连续页码
        //},
        height: "full-45",
        limit: 30,
        skin: "line",
        limits: [30, 45, 60],
        toolbar: '#toolbarTop', //开启头部工具栏，并为其绑定左侧模板
        //defaultToolbar: null,
        parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "total": res.data.length, //解析数据长度
                "data": res.data //解析数据列表
            };
        },
        response: {
            statusCode: 200, //规定成功的状态码，默认：0
            countName: 'total' //规定数据总数的字段名称，默认：count
        },
        cols: [[
            {minWidth: 120, title: '业务名称', templet: function (d) {
                return "<a href='javascript:' process key='" + d.id + "'>" + d.name + "</a>"
            }},
            {field: "state", minWidth: 120, title: '业务状态', templet: function (d) {
                if (d.state===0)
                    return '<span class="layui-badge layui-bg-black">执行中</span>'
                else
                    return '<span class="layui-badge layui-bg-green">已结束</span>'
            }},
            {field: "startTime", minWidth: 120, title: '开始时间'},
            {field: "endTime", minWidth: 120, title: '结束时间'},
            {title: '操作', toolbar: '#barRight', width: 260, unresize: true, fixed: 'right'}]
        ]
    });

    table.on('toolbar(table)', function(obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
            case 'refresh':
                tab.reload()
                break;
        }
    });

    $(document).on("click", "a[process]", function () {
        layer.open({
            type: 2,
            content: "/activities/img/"+$(this).attr("key"),
            title: false,
            area: ["95%", "95%"],
            scrollbar: false
        })
    })

    table.on('tool(table)', function(obj) {
        var data = obj.data;
        if(obj.event === 'schedule'){
            layer.open({
                type: 2,
                content: "/activities/img/"+data.id,
                title: false,
                area: ["95%", "95%"],
                scrollbar: false
            })
        } else if(obj.event === "del"){
            layer.confirm('确定删除 <span style="color: #ff0000; font-weight: 800">' + data.name + '</span> 么？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                layer.load()
                $.get("/activities/my/delete/"+data.id, (res)=>{
                    layer.closeAll('loading')
                    if (res.code == 200) {
                        tab.reload();
                        layer.msg("删除成功")
                    } else {
                        layer.msg("删除失败")
                    }
                })
            });
        } else if (obj.event==="info"){
            layer.open({
                type: 2,
                content: "/page/business/form/"+data.processDefinitionId+"/"+data.id,
                title: false,
                area: ["60%", "80%"],
                scrollbar: false
            })
        }
    });


</script>
</body>
</html>